<template>
	<div id="basicLayout">
		<el-container v-loading="loading" style="min-height: 100vh">
			<el-header class="header">
				<GlobalHeader></GlobalHeader>
			</el-header>
			<el-main class="content">
				<router-view></router-view>
			</el-main>
			<el-footer class="footer">Footer</el-footer>
		</el-container>
	</div>
</template>
<script setup>
import GlobalHeader from "@/components/GlobalHeader";
import { onMounted, ref } from "vue";
const loading = ref(true);
onMounted(() => {
	loading.value = false;
});
</script>

<style scoped lang="scss">
#basicLayout {
	.header {
		margin-bottom: 16px;
	}

	.content {
		background: linear-gradient(135deg, #a1c4fd, #c2e9fb);
		margin-bottom: 16px;
		padding: 20px;
	}

	.footer {
		background: #efefef;
		padding: 16px;
		position: sticky;
		bottom: 0;
		left: 0;
		right: 0;
		text-align: center;
	}
}
</style>
